<template>
  <a-modal :title='title+"(可通过双击行选择)"' :width='900'  :dialog-style="{ top: '10px' }" :visible='visible' :confirmLoading='loading' @ok='handleSubmit' @cancel='handleCancel'>
    <f-search-form :more='false' @searchHandler='searchHandler'>
      <f-search-form-item label='部门人员姓名' name='saleManName' style='width:300px'/>
    </f-search-form>
    <f-table ref='table' v-if='visible' rowKey='saleManId' :showSetting='false' :scroll='{x:800,y:300}' @dblclick='dblclick' :tableColumns='columns' :multiple='multiple' :showRadio='!multiple' :showMultipleBtn='false' :operator='operator' :params='queryParam' :api='api.saleMan' handler='deptManSelectPageListHandler' @onSelectChange='onSelectChange'>
    <span slot='action' slot-scope='text, record'>
          <template>
            <a @click='$refs.drawer.showDrawer(record)'>编辑</a>
            <a-divider type='vertical' />
          </template>
        </span>
    </f-table>
    <template slot='footer'>
      <span v-if='!multiple'></span>
      <span v-if='multiple'>
        <a-button key='back' @click='handleCancel'>
          取消
        </a-button>
        <a-button key='submit' type='primary' @click='handleSubmit'>
          确定
        </a-button>
        </span>
    </template>
    <saleman-drawer ref='drawer'></saleman-drawer>
  </a-modal>
</template>
<script>
import api from "../js/api"
import SalemanDrawer from "@/views/module/haiying/saleman/saleman_drawer"

export default {
  name: "SelectDeptManModal",
  props: {
    title: {
      type: String,
      default: "部门人员选择"
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let operator = []
    return {
      refs: this.$refs,
      api: Object.assign(api, this.api),
      loading: false,
      visible: false,
      selectedRowKeys: [],
      selectedRows: [],
      //列表初始化查询参数
      queryParam: {
      },

      // 表头
      columns: [
        {
          title: "部门",
          align: "center",
          width: "130px",
          dataIndex: "deptName"
        },
        {
          title: "姓名",
          align: "center",
          width: "120px",
          dataIndex: "saleManName"
        },
        {
          title: "职务",
          align: "center",
          width: "80px",
          dataIndex: "positionName"
        },
        {
          title: "职务编码",
          align: "center",
          width: "80px",
          dataIndex: "positionCode"
        },
        
        {
          title: "区域",
          align: "center",
          width: "120px",
          dataIndex: "areaName"
        },
        {
          title: "操作",
          align: "center",
          width: "80px",
          dataIndex: "action",
          fixed: "right",
          scopedSlots: { customRender: "action" }
        }
      ],
      operator: operator
    }
  },
  methods: {
    open(params) {
      this.queryParam = params
      this.visible = true
      this.selectedRowKeys = []
      this.selectedRows = []
      this.$refs.table.refresh(true, params)
    },
    close() {
      this.$emit("close")
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    dblclick(record, event) {
      let selectedRowKeys = []
      let selectedRows = []
      selectedRowKeys.push(record.saleManId)
      selectedRows.push(record)
      this.$emit("onSelectChange", selectedRowKeys, selectedRows)
      this.close()
    },
    handleSubmit() {
      this.$emit("onSelectChange", this.$refs.table.getSelectedRowKey(), this.$refs.table.getSelectedRows())
      this.close()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }
  },
  created() {
  },
  components: { SalemanDrawer }
}
</script>

<style scoped lang='less' rel='stylesheet/less'>

</style>
